<template>
  <div class="pagss">
    <div style="height: 20px;"></div>
    <Navvz></Navvz>
    <el-row>

      <el-col :span="24">
        <el-row>
          <el-col :span="24">
            <div class="panel-group2">
              <div class="f_20 f_bold" style="margin-bottom: 20px;">正式服列表</div>

              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="申请服务器" name="first">

                  <div class=" row_a_c mb_20">
                    <el-button class="scwj" type="primary" size="mini" @click="handleAdd">提交申请</el-button>
                  </div>
                  <el-table :data="tableData" style="width: 100%">
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column prop="file_name" label="空间编号"></el-table-column>

                    <el-table-column prop="operate_id" label="空间名称"></el-table-column>
                    <el-table-column prop="version_id" label="游戏id"></el-table-column>
                    <el-table-column prop="updated_at" label="游戏名称"></el-table-column>


                    <el-table-column prop="size" label="开通时间" width="100"></el-table-column>
                    <el-table-column prop="size" label="到期时间" width="100"></el-table-column>
                    <el-table-column prop="size" label="空间状态" width="100"></el-table-column>


                    <el-table-column label="操作" width="60">
                      <template slot-scope="scope">
                        <div class="row center">
                          <el-button plain size="small" type="primary" @click="handleCut(scope.row)">切换</el-button>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>


                <!-- 正式服列表++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
                <el-tab-pane label="正式服列表" name="second">
                  <div class=" row_a_c mb_20">
                    <el-button class="scwj" type="primary" size="mini" @click="handleUpdateVer">上传版本</el-button>
                  </div>
                  <el-table :data="tableData" style="width: 100%">
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column prop="file_name" label="游戏id"></el-table-column>

                    <el-table-column prop="operate_id" label="游戏名"></el-table-column>
                    <el-table-column prop="version_id" label="logo"></el-table-column>
                    <el-table-column prop="updated_at" label="上次更新"></el-table-column>


                    <el-table-column prop="size" label="备注" width="100"></el-table-column>



                    <el-table-column label="操作" width="390">
                      <template slot-scope="scope">

                        <div class="row center">
                          <el-button style="background: #EF4F19;color: #fff;" size="small"
                            @click="handleUpdateVer(scope.row)">更新版本</el-button>

                          <el-button style="background: #20CCC2;color: #fff;margin-left: 10px;" size="small"
                            @click="handleUpdateNy(scope.row)">申请联运</el-button>
                          <el-button style="background: #306EF2;color: #fff;" size="small"
                            @click="handleUpdate(scope.row)">申请入库</el-button>

                          <div style="color: #00A30F;" class="ml_10 cursor" @click="handleDelete(scope.row)">下架</div>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
                <!-- 正式服列表============================================================== -->

                <!-- 已联运版本++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
                <el-tab-pane label="已联运版本" name="thirdly">
                  <el-table :data="tableData" style="width: 100%">
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column prop="file_name" label="游戏id"></el-table-column>
                    <el-table-column prop="operate_id" label="游戏名"></el-table-column>
                    <el-table-column prop="version_id" label="logo"></el-table-column>
                    <el-table-column prop="updated_at" label="上次更新"></el-table-column>
                    <el-table-column prop="size" label="备注" width="100"></el-table-column>
                    <el-table-column label="操作" width="390">
                      <template slot-scope="scope">
                        <div class="row center">
                          <el-button style="background: #EF4F19;color: #fff;" size="small"
                            @click="handleUpdateVer(scope.row)">更新版本</el-button>
                          <div style="color: #00A30F;" class="ml_10 cursor" @click="handleDelete(scope.row)">下架</div>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
                <!-- 已联运版本====================================================================== -->

                <el-tab-pane label="已入库版本" name="fourthly">
                  <el-table :data="tableData" style="width: 100%">
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column prop="file_name" label="游戏id"></el-table-column>
                    <el-table-column prop="operate_id" label="游戏名"></el-table-column>
                    <el-table-column prop="version_id" label="logo"></el-table-column>
                    <el-table-column prop="updated_at" label="上次更新"></el-table-column>
                    <el-table-column prop="size" label="备注" width="100"></el-table-column>
                    <el-table-column label="操作" width="390">
                      <template slot-scope="scope">
                        <div class="row center">
                          <el-button style="background: #EF4F19;color: #fff;" size="small"
                            @click="handleUpdateVer(scope.row)">更新版本</el-button>
                          <div style="color: #00A30F;" class="ml_10 cursor" @click="handleDelete(scope.row)">取消入库</div>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
              </el-tabs>



              <div class="center ">
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page"
                  :limit.sync="queryParams.pageSize" @pagination="getList" />
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 增加正式服++++++++++++++++++++++++++++++ -->
    <el-dialog center title="提交申请" :visible.sync="open_zsf" width="36%" append-to-body>
      <el-form ref="form_zfs" :model="form_zfs" :rules="rules" label-width="100px" label-position="top">

        <el-form-item label="配置在服务器的游戏名称"><el-input v-model="form_zfs.version_id" /></el-form-item>

        <div>*申请使用时间</div>
        <el-button type="primary" style="margin-top: 10px;width: 100px;">1个月</el-button>



        <el-form-item label="说明" prop="remark"><el-input :rows="4" v-model="form_zfs.remark" type="textarea"
            placeholder="说明信息,申请原因等"></el-input></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer center">
        <div class="quxiao"><el-button style="width: 200px;height: 40px;margin-right: 30px;" @click="cancel">取
            消</el-button></div>

        <el-button style="width: 200px;height: 40px;" type="primary" @click="submitFormZsf">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 增加正式服============================================ -->


    <!-- 更新版本++++++++++++++++++++++++++++++++++++++++++++ -->
    <el-dialog center :title="title" :visible.sync="open_gxbb" width="36%" append-to-body>
      <el-form ref="form_zfs" :model="form_zfs" :rules="rules" label-width="100px" label-position="top">
        <el-form-item label="默认版本ID(已选择)"><el-input disabled v-model="form_zfs.version_id" /></el-form-item>
        <div>*版本更新入口</div>
        <el-button type="primary" style="margin-top: 10px;width: 100px;">点击更新</el-button>
        <div class="explain">压缩文件格式为zip,压缩包包含文件目录结构的完整路径为:Mirserver/Mir200/* (除Mir00下的文件外，其他服务端路径文件无效)
        </div>
        <el-form-item label="logo更新" prop="logo">
          <el-upload :action="upload_url" :headers="headers" :before-upload="handleSetHeaders"
            :on-success="handleFileSuccessZsf" :show-file-list="false" class="avatar-uploader">
            <img v-if="form_zfs.logo" :src="form_zfs.logo" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>



        <el-form-item label="备注更新" prop="remark"><el-input :rows="4" v-model="form_zfs.remark" type="textarea"
            placeholder="备注信息"></el-input></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer center">
        <div class="quxiao"><el-button style="width: 200px;height: 40px;margin-right: 30px;" @click="open_gxbb=false">取
            消</el-button></div>

        <el-button style="width: 200px;height: 40px;" type="primary" @click="submitFormZsf">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 更新版本================================================== -->

    <!-- 申请联运++++++++++++++++++++ -->
    <el-dialog center title="请填写此版本运营" :visible.sync="openNy" width="500px" style="margin-top: 200px;" append-to-body>
      <el-form ref="form" :model="formNy" label-width="100px" label-position="top">
        <el-form-item label=""><el-input v-model="formNy.operate_id" placeholder="请输入运营ID" /></el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer row">
        <div class="quxiao"><el-button style="width: 200px;height: 40px;margin-right: 30px;" @click="cancel">取
            消</el-button></div>
        <el-button style="width: 200px;height: 40px;" type="primary" @click="nyUpdate">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 申请联运=================== -->



    <!-- 申请入库+++++++++++++++++++++++++++++++ -->
    <el-dialog center title="请填写版本入库信息" :visible.sync="open" width="520px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="top">
        <el-form-item label="已选择游戏名称"><el-input disabled v-model="form.file_name" placeholder="" /></el-form-item>

        <el-form-item label="游戏图片(可多张)" prop="logo">

          <el-upload :action="upload_url" :headers="headers" list-type="picture-card" :on-success="handleChangePho"
            :file-list="editFiles" :on-remove="handleRemovePho" :show-file-list="true">
            <i class="el-icon-plus"></i>
          </el-upload>

        </el-form-item>

        <el-form-item label="游戏介绍" prop="remark">
          <el-input :rows="4" v-model="form.remark" type="textarea" placeholder="请输入游戏介绍(上限150字)"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer row">
        <div class="quxiao"><el-button style="width: 200px;height: 40px;margin-right: 30px;" @click="cancel">取
            消</el-button></div>
        <el-button style="width: 200px;height: 40px;" type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 申请入库+++++++++++++++++++++++++++++++ -->


  </div>
</template>

<script>
  import CountTo from 'vue-count-to';
  import Cookies from 'js-cookie';
  import Vue from 'vue';

  import Navvz from '@/components/Navvz';
  import Sidebartss from '@/components/Sidebartss';
  import * as Database from '@/api/system/database';
  import * as Auth from '@/utils/auth';
  import * as Games from '@/api/system/games';

  export default {
    name: 'Index',
    components: {
      CountTo,
      Navvz,
      Sidebartss
    },
    data() {
      return {

        activeName: 'first',
        user_id: '',
        game_name: '',
        id: '', //更新id
        mysqlList: [],
        fileList: [],

        editFiles: [],
        upload_url: process.env.VUE_APP_BASE_URL + '/file/upload',
        upload_url_all: process.env.VUE_APP_BASE_URL + '/file/uploadAll',
        headers: Auth.getHeader(),
        logo: '',
        // 总条数
        total: 0,
        // 字典表格数据
        tableData: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open_zsf: false,
        open: false,
        openNy: false,
        open_gxbb: false,

        // 查询参数
        queryParams: {
          page: 1,
          pageSize: 10,
          name: undefined,
          test_formal: 1
        },

        // 查询数据库参数
        queryParamsMysql: {
          page: 1,
          pageSize: 100
        },
        // 表单参数

        form: {
          photo: '' // 活动图片
        },
        form_zfs: {},
        formNy: {},
        // 表单校验
        rules: {
          file_addr: [{
            required: true,
            message: '上传版本',
            trigger: 'change'
          }],
          logo: [{
            required: true,
            message: 'logo不能为空',
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '区服名不能为空',
            trigger: 'blur'
          }],
          port: [{
            required: true,
            message: '端口不能为空',
            trigger: 'blur'
          }],
          ip: [{
            required: true,
            message: 'ip不能为空',
            trigger: 'blur'
          }],

          database_id: [{
            required: true,
            message: '请选择引数据库',
            trigger: 'change'
          }]
        },
        loading: false
      };
    },
    created() {
      this.getMysqlList();
      this.getList();
      this.user_id = localStorage.getItem('user_id')
    },
    mounted() {},
    methods: {
      handleClick() {

      },

      handlePictureCardPreview(file) {
        console.log('file', file)
      },
      handleRemovePho(file, fileList) {
        this.fileChange(fileList);
        console.log('file', file);
        console.log('fileList', fileList);
      },

      //相册上传成功调用
      handleChangePho(res, file, fileList) {

        this.fileChange(fileList);


      },

      /** 重置按钮操作 */
      resetQuery() {
        this.mysqlList = [];
        this.fileList = [];
        this.$set(this.queryParams, 'name', undefined);
        this.resetForm('queryForm');
        this.handleQuery();
      },

      //查询数据库列表
      getMysqlList() {
        Database.getList(this.queryParamsMysql).then(response => {
          this.mysqlList = response.data.rows;
        });
      },



      // 设置photo值
      fileChange(fileList) {

        let temp_str = '';
        if (fileList.length > 0) {
          for (let i = 0; i < fileList.length; i++) {
            if (fileList[i].response) {
              if (fileList[i].response.code === 200) {
                if (i === 0) {
                  temp_str += fileList[i].response.data;
                } else {
                  // 最终photo的格式是所有已上传的图片的url拼接的字符串（逗号隔开）
                  temp_str += ',' + fileList[i].response.data;
                }
              }
            }
          }
        }
        this.form.photo = temp_str;
      },


      handleChange(file, fileList) {
        this.fileList = fileList.slice(-1);
        console.log('file', file);
      },

      handleSetHeaders() {
        this.headers = Auth.getHeader();
      },

      handleSetHeadersUp(file, row) {
        this.id = row.id;

        this.$set(this.formNy, 'operate_id', row.operate_id);
        this.$set(this.form, 'file_addr', row.file_addr);
        this.$set(this.form, 'file_name', row.file_name);
        this.$set(this.form, 'size', row.size);

        this.$set(this.form, 'logo', row.logo);
        this.$set(this.form, 'remark', row.remark);

        this.headers = Auth.getHeader();
      },


      /****正式服文件上传*****/
      handleFileSuccessZsf(res) {
        this.$set(this.form_zfs, 'logo', res.data);
      },

      /****文件上传*****/
      handleFileSuccess(res) {
        this.$set(this.form, 'logo', res.data);
      },



      /****文件上传-新增*****/
      handleFileSuccessAdd(res) {
        this.reset();
        var per = {
          file_name: res.data.file_name,
          size: res.data.size,
          file_addr: res.data.url,
          test_formal: 1,
          logo: res.data.logo,
          remark: res.data.remark
        };

        Games.Add(per).then(response => {
          this.$modal.msgSuccess('新增成功');
          this.reset();
          this.getList();
        });


      },


      /****文件上传-修改*****/
      handleFileSuccessUpdate(res) {
        var per = {
          id: this.id,
          file_name: res.data.file_name,
          size: res.data.size,
          file_addr: res.data.url,
          operate_id: this.formNy.operate_id,
          test_formal: 1,
          logo: this.form.logo,
          remark: this.form.remark
        };
        Games.Update(per).then(response => {
          this.$modal.msgSuccess('更新成功');
          this.reset();
          this.getList();
        });
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.page = 1;
        this.getList();
      },

      handleRemove(file, fileList) {
        this.fileList = [];
        this.form.file_addr = '';
        this.form.file_name = '';
        this.form.size = '';
      },


      /** 正式服提交按钮 */
      submitFormZsf: function() {

        // console.log('fileList',this.fileList);
        // return;
        if (this.fileList.length <= 0) {
          this.$modal.msgWarning('请上传版本');
          return;
        } else {
          this.form_zfs.file_addr = this.fileList[0].response.data;
        }
        this.$refs['form_zfs'].validate(valid => {
          if (valid) {

            this.form_zfs.test_formal = 1;
            this.createCode();
            this.form_zfs.file_addr = this.fileList[0].response.data;
            var fa = this.fileList[0].name.split(".");
            this.form_zfs.file_name = fa[0];
            this.form_zfs.size = this.fileList[0].size;

            if (this.form_zfs.id != undefined) {
              Games.Update(this.form_zfs).then(response => {
                this.$modal.msgSuccess('修改成功');
                this.open_zsf = false;
                this.getList();
              });
            } else {
              Games.Add(this.form_zfs).then(response => {
                this.$modal.msgSuccess('新增成功');
                this.open_zsf = false;
                this.getList();
              });
            }
          }
        });
      },


      /** 提交按钮 */
      submitForm: function() {


        // console.log('form', this.form);
        // return;
        this.$refs['form'].validate(valid => {
          if (valid) {
            // (this.form.operate_id = this.formNy.operate_id), (this.form.test_formal = 1); //正式
            this.createCode();
            if (this.fileList.length > 0) {
              this.form.file_addr = this.fileList[0].response.data;
              this.form.file_name = this.fileList[0].name;
              this.form.size = this.fileList[0].size;
            }
            this.form.photo_type = 1;
            if (this.form.id != undefined) {
              Games.Update(this.form).then(response => {
                this.$modal.msgSuccess('修改成功');
                this.open = false;
                this.getList();
              });
            } else {
              Games.Add(this.form).then(response => {
                this.$modal.msgSuccess('新增成功');
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },




      //联远修改提交
      nyUpdate() {
        var per = {
          id: this.id,
          operate_id: this.formNy.operate_id,
          size: this.form.size,
          file_addr: this.form.file_addr,
          file_name: this.form.file_name,
          test_formal: 1,
          operate_id: this.formNy.operate_id,
          logo: this.form.logo,
          remark: this.form.remark,
          photo: this.form.photo
        };

        Games.Update(per).then(response => {
          this.openNy = false;
          this.$modal.msgSuccess('更新成功');
          this.getList();
        });
      },

      /** 更新版本按钮操作 */
      handleUpdateVer(row) {
        console.log(123);
        this.open_gxbb = true;
      },


      /** 联运修改按钮操作 */
      handleUpdateNy(row) {
        this.reset();
        const id = row.id;
        Games.Show(id).then(response => {
          console.log('handleUpdateNy', response.data);
          this.id = row.id;
          this.openNy = true;
          this.phopj(row.photo)
          this.$set(this.formNy, 'operate_id', response.data.operate_id);
          this.$set(this.form, 'file_addr', response.data.file_addr);
          this.$set(this.form, 'file_name', response.data.file_name);
          this.$set(this.form, 'size', response.data.size);

          this.$set(this.form, 'logo', response.data.logo);
          this.$set(this.form, 'remark', response.data.remark);
        });
      },

      /** 申请入库按钮操作 */
      handleUpdate(row) {
        this.reset();

        console.log('row', row.photo)
        this.phopj(row.photo)

        console.log('this.form.photo', this.form.photo)
        // console.log('Arr', Arr)
        this.id = row.id;
        this.$set(this.formNy, 'operate_id', row.operate_id);
        this.$set(this.form, 'file_addr', row.file_addr);
        this.$set(this.form, 'id', row.id);
        this.$set(this.form, 'file_name', row.file_name);
        this.$set(this.form, 'size', row.size);
        this.$set(this.form, 'logo', row.logo);
        this.$set(this.form, 'remark', row.remark);
        this.open = true;
      },

      phopj(photo) {
        if (photo) {
          var temp = photo.split(",");

          console.log('temp_phopj', temp)
          console.log('temp.length', temp.length)
          if (temp.length > 0) {
            for (let t = 0; t < temp.length; t++) {
              //通过[{name: 'name', url: 'url地址'}]格式初始化照片墙
              this.editFiles.push({
                url: temp[t],
                name: temp[t],
                response: {
                  code: 200,
                  data: temp[t]
                }
              });
              if (t === 0) {
                this.form.photo = temp[t]
              } else {
                // 最终photo的格式是所有已上传的图片的url拼接的字符串（逗号隔开），根据实际需要修改格式
                this.form.photo += ',' + temp[t];
              }
            }
          }
        }
      },

      /** 切换按钮操作 */
      handleCut(row) {
        console.log('切换', row);
        const id = row.id;
        this.$modal
          .confirm('是否确认切换')
          .then(function() {
            return Games.Cut(id);
          })
          .then(() => {
            this.getList();
            this.game_name = row.file_name;
            this.$modal.msgSuccess('切换成功');
          })
          .catch(() => {});
      },

      /** 删除按钮操作 */
      handleDelete(row) {
        const id = row.id;
        this.$modal
          .confirm('是否确认删除')
          .then(function() {
            return Games.Delete(id);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess('删除成功');
          })
          .catch(() => {});
      },

      /** 查询游戏列表 */
      getList() {
        this.loading = true;
        Games.getList(this.queryParams).then(response => {
          this.tableData = response.data.rows;
          var _this = this;
          this.tableData.forEach(function(value) {
            console.log('value', value)
            if (value.high_how == 1) {
              _this.game_name = value.file_name;
            }
          });
          this.total = response.data.total;
          this.loading = false;
        });
      },

      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open_zsf = true;
        this.title = '添加正式服';

        if (this.tableData.length > 0) {
          var n1 = this.tableData[0]['version_id'];
          var version_id = Number(n1) + 1;
        } else {
          var version_id = this.user_id + '1';
        }


        this.$set(this.form_zfs, 'version_id', version_id);

      },

      /** 申请入库按钮操作 */
      handleRk() {
        this.reset();
        this.open = true;

      },
      // 取消按钮
      cancel() {
        this.openNy = false;
        this.open = false;
        this.open_zsf = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.fileList = [];
        this.form = {};
        this.formNy = {};
        this.form_zfs = {};
        this.editFiles = [];

        this.resetForm('form');
      },

      //生成随机数
      createCode() {
        let code = ''; //声明一个空的字符串值用于后面赋值
        const codeLength = 16; //验证码的长度，可以根据个人需求改变
        const random = [
          0,
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          'A',
          'B',
          'C',
          'D',
          'E',
          'F',
          'G',
          'H',
          'I',
          'J',
          'K',
          'L',
          'M',
          'N',
          'O',
          'P',
          'Q',
          'R',
          'S',
          'T',
          'U',
          'V',
          'W',
          'X',
          'Y',
          'Z'
        ]; //随机数的取值范围
        for (let i = 0; i < codeLength; i++) {
          //循环遍历codeLength，值是几，就循环几次
          let index = Math.floor(Math.random() *
            36); //Math.floor方法用于返回小于或等于一个给定数字的最大整数；Math.random方法返回 0（含）和 1（不含）之间的随机数
          code += random[index]; //根据索引取得随机数加到code上
        }
        this.form.version = code; //把code值赋给data中定义好的appid
      }
    }
  };
</script>

<style lang="scss" scoped>
  .quxiao {
    ::v-deep .el-button {
      border: 1px solid #1a82fb;
      color: #1a82fb;
    }
  }

  ::v-deep .el-input--medium .el-input__inner {
    background: #f3f3f4;
    border: 0px solid #3e68c9;
  }

  ::v-deep .el-textarea__inner {
    border: 0px solid #3e68c9;
    background-color: #f3f3f4;
  }

  .explain {
    line-height: 25px;
    color: red;
  }

  .dqqf {
    min-width: 100px;
    height: 34px;
    padding: 0 10px;
    background: #f8ede7;
    border-radius: 6px;

    font-size: 16px;

    font-weight: bold;
    color: #cc1a08;
  }

  .scwj {
    ::v-deep .el-button--mini {
      font-size: 16px;
      font-weight: bold;
      color: #fff;
    }
  }

  .pagss {
    height: 100%;
    background: #E4EEF9;
  }

  .avatar {
    width: 78px;
    height: 78px;
    display: block;
  }

  .panel-group1 {
    padding: 25px;
    margin-top: 18px;
    margin-bottom: 0px;
    margin-right: 15px;
    min-height: 220px;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  .panel-group2 {
    padding: 25px;
    margin-top: 18px;
    margin-bottom: 0px;
    margin-right: 15px;
    margin-left: 15px;
    min-height: 800px;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #000000;
    width: 78px;
    height: 78px;
    line-height: 78px;
    text-align: center;
    background-color: #f4f4f5;
  }

  ::v-deep .el-divider--vertical {
    height: 100px;
  }

  ::v-deep .pagination-container .el-pagination {
    position: relative;
  }

  ::v-deep .el-form-item__content {
    // margin-left: 40px !important;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .yhbox {
    padding: 20px;
    width: 320px;
    height: 120px;
    background: #ffffff;
    // background: red;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #bbbbbb;
  }

  ::v-deep .el-dialog__header {
    padding: 20px;
    padding-bottom: 0;
  }

  ::v-deep .el-tabs__item.is-active {
    color: #fff;
    background: #306EF2;
    padding-left: 20px;
  }

  ::v-deep .el-tabs--top .el-tabs__item.is-top:nth-child(2),
  .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) {
    padding-left: 20px;
  }

  ::v-deep .el-tabs--top .el-tabs__item.is-top:last-child,
  .el-tabs--top .el-tabs__item.is-bottom:last-child,
  .el-tabs--bottom .el-tabs__item.is-top:last-child,
  .el-tabs--bottom .el-tabs__item.is-bottom:last-child {
    padding-right: 20px;
  }


  .txxbutton {
    ::v-deep .el-button--medium {
      width: 146px;
      height: 52px;
      padding: 10px 20px;
      font-size: 20px;
      border-radius: 4px;
    }
  }
</style>
